<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Image Demo</title>
        <link rel="stylesheet" type="text/css" href="default.css">
        <script type="text/javascript" src="http://www.big5apps.com/api/bigfive.js">
        </script>
        <script type="text/javascript">
            
            var PHOTO_BASE_URL = "http://www.big5apps.com/"
            // var PHOTO_BASE_URL = "http://desktop01.local:8080/"                        
            var UID = "default-" + Math.random();
            
            function uploadCallback(){
                url = PHOTO_BASE_URL + "show?uid=" + Device.id + "&__ctr=" + Math.random()               
                $('dev-photo').innerHTML = '<img src="' + url + '" style="border: 1px solid black; max-width: 280px; max-height: 280px;" />'
            }
            
            function errorCallback(msg){
                $('dev-photo').innerHTML = ""
                alert(msg)
            }
            
            function cancelCallback(){
                $('dev-photo').innerHTML = "Cancelled"
                alert(msg)
            }
            
            function setLoading(text){
                $('dev-photo').style.height = "280px"
                $('dev-photo').innerHTML = "<br /><br /><img src='loader.gif' /> "
            }
            
            function getPhotoByCamera(){
                setLoading()
                Device.Image.getFromCamera(
					PHOTO_BASE_URL + "upload?from=camera&uid=" + UID, 
					uploadCallback, 
					errorCallback, 
					cancelCallback);
            }
            
            function getPhoto(){
                setLoading()
                Device.Image.getFromPhotoLibrary(
					PHOTO_BASE_URL + "upload?from=library&uid=" + UID, 
					uploadCallback, 
					errorCallback, 
					cancelCallback);
            }
            
            window.onload = function(){
                Device.start(function(){
                    UID = Device.id
                });
            }
        </script>
    </head>
    <body>
        <h1>Image Demo</h1>
        <a id="back" href="index.html">Back</a>
        <div id="dev-photo" align="middle" style="margin: 8px 0;">
        </div>
        <p align="middle">
            <button onclick="getPhoto(); return false;">
                Photo Library
            </button>
            <button onclick="getPhotoByCamera(); return false;">
                Camera
            </button>
        </p>
        <!-- a href="">Reload</a -->
    </body>
</html>
